<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" name="" id="" />
  <span style="color: red;"></span>
  <script>
    // 正则用的最多的是表单验证

    // 1. 创建正则表达式
    const regexp1 = /\d/; // \d表示0-9的数字
    const regexp2 = new RegExp('[a-zA-Z]'); // 表示小写或者大写的字母

    const reg3 = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ // 邮箱

    const reg4 = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/ // 手机号
    const reg5 = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/


    // 2. test方法
    // console.log(reg5.test("12656567878"))

    document.querySelector("input").onblur = () => {
      console.log(document.querySelector("input").value)
      if (!reg5.test(document.querySelector("input").value)) {
        document.querySelector("span").innerHTML = "你输入的手机号格式有误"
      } else {
        document.querySelector("span").innerHTML = ""
      }
    }
  </script>
</body>
</html>